<template>
  <div class="layout">
    <div class="helptalentDetail">
      <div
        style="display: flex; justify-content: space-between; margin-top: 20px">
        <Breadcrumb class="breadcrumb" :crumbs="crumbs"></Breadcrumb>
        <!-- <div class="backBtn" @click="goBack()">返回</div> -->
      </div>
      <!-- <div class="topDiv">
        <div class="msgDiv">{{ talent.title }}</div>
      </div> -->
      <ContainerTitle text="高端人才详情页" :more="false"></ContainerTitle>
			<div class="talent-wrap">
        <img v-if="talent.headUrl" :src="talent.headUrl" >
				<img v-else src="@/assets/image/finance/txico.png" >
				<div class="content">
					<div class="flex-box">
						<div class="name">{{talent.name}}</div>
						<div class="tag" v-if="(skills && skills.length>0) && talent.skill">
              {{$selectDict(skills, talent.skill).dictLabel}}
            </div>
					</div>
					<div class="flex-box">
						<div class="in"><span>擅长领域：</span><p>{{lndustryField(talent.lndustryField)}}</p></div>
            <!-- {{talent.contact}} mobileStr(talent.contact)-->
						<div class="in"><span>联系电话：</span><p>{{mobileStr(talent.contact)}}</p></div>
						<div class="in"><span>电子邮箱：</span>{{talent.mailbox}}</div>
						<div class="in" v-if="(expertTypes && expertTypes.lenght>0) && talent.expertType">
              <span>专家类型：</span>{{$selectDict(expertTypes, talent.expertType).dictLabel}}
            </div>
					</div>
					<div class="flex-box">
						<div class="in-tip">专家介绍：</div>
						<div class="text-box">
							{{talent.remarks}}
						</div>
					</div>
				</div>
			</div>
      <!-- <div class="tableDiv">
        <div class="rowDiv">
          <div style="width: 50%; display: flex; justify-content: left">
            <div class="keyDiv">姓名</div>
            <div class="valueDiv">{{ talent.name }}</div>
          </div>
          <div style="width: 50%; display: flex; justify-content: left">
            <div class="keyDiv">性别</div>
            <div class="valueDiv">{{ talent.genderName }}</div>
          </div>
        </div>
        <div class="rowDiv">
          <div style="width: 50%; display: flex; justify-content: left">
            <div class="keyDiv">出生年月</div>
            <div class="valueDiv">{{ talent.birthMonth }}</div>
          </div>
          <div style="width: 50%; display: flex; justify-content: left">
            <div class="keyDiv">学历</div>
            <div class="valueDiv">{{ talent.educationName }}</div>
          </div>
        </div>
        <div class="rowDiv">
          <div style="width: 50%; display: flex; justify-content: left">
            <div class="keyDiv">籍贯</div>
            <div class="valueDiv">{{ talent.nativePlace }}</div>
          </div>
          <div style="width: 50%; display: flex; justify-content: left">
            <div class="keyDiv">民族</div>
            <div class="valueDiv">{{ talent.nationName }}</div>
          </div>
        </div>
        <div class="rowDiv">
          <div style="width: 50%; display: flex; justify-content: left">
            <div class="keyDiv">婚姻状况</div>
            <div class="valueDiv">{{ talent.maritalStatusName }}</div>
          </div>
          <div style="width: 50%; display: flex; justify-content: left">
            <div class="keyDiv">职业技能</div>
            <div class="valueDiv">{{ talent.skill }}</div>
          </div>
        </div>
      </div> -->
      <!-- <div class="title" style="margin-top: 20px">工作经验描述</div>
      <div class="tableDiv desc">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{
          talent.experienceDesc ? talent.experienceDesc : "无"
        }}
      </div> -->
      <Buttons @goBack="goBack()" :buttons="buttons" class="btn"></Buttons>
    </div>
  </div>
</template>

<script>
import Breadcrumb from "@/components/breadcrumb";
import { request } from "@/utils/request.js";
import config from "@/utils/config.js";

export default {
  name: "helptalentDetail",
  meta: {
    name: "DT人才详细资料详情页",
  },
  components: { Breadcrumb },
  data() {
    return {
      buttons:[{text:"返回",type:"normal",size:"l",method:"goBack"}],
      crumbs: [
        { label: "人才服务", value: "help" },
        { label: "高端人才列表", value: "talentRecommendList" },
        {
          label: "高端人才详情页",
          value: "",
          choose: true,
        },
      ],
      talent: {
      },
      isHelp: false,
      expertTypes: [],
      industryFields: [],
      skills: []
    };
  },
  computed: {
    lndustryField() {
      return function(value){
        let strs = []
        if(value){
          strs = value.split(',')
        }
        let data = []
        if(this.industryFields && this.industryFields.length>0) {
          strs.forEach((el, i) => {
            data.push(this.$selectDict(this.industryFields, el).dictLabel)
          });
          let str = data.join(',')
          return str
        }
        
      }
    },
    mobileStr(){
      return function(str) {
        if(str) {
          return  str.substring(0,3)+'****'+ str.substring(7,str.length);
        }
      }
    }
  },
  mounted(){
    this.gettypeList()
    if(this.$route.params.talent) {
      this.talent = JSON.parse(this.$route.params.talent);
      localStorage.setItem('talent', this.$route.params.talent)
    }else {
      this.talent = JSON.parse(localStorage.getItem('talent'))
    }
    this.isHelp = this.$route.params.isHelp;
  },
  activated() {
    // this.skills = JSON.parse(localStorage.getItem('skills'))
    // this.industryFields = JSON.parse(localStorage.getItem('industryFields'))
    // this.expertTypes = JSON.parse(localStorage.getItem('expertTypes'))
    // // console.log('this.$route.params.talent', this.$route.params.talent)
    // if(this.$route.params.talent) {
    //   this.talent = JSON.parse(this.$route.params.talent);
    //   localStorage.setItem('talent', this.$route.params.talent)
    // }else {
    //   this.talent = JSON.parse(localStorage.getItem('talent'))
    // }
    // this.isHelp = this.$route.params.isHelp;
  },
  methods: {
    // 字典查询 
    async gettypeList() {
      let api = `company_industry,skill,expert_type`;
      // 调用公共方法中的查询字典表
      this.getDictList(this, api).then((res) => {
        this.industryFields = res.company_industry;
        this.expertTypes = res.expert_type;
        this.skills = res.skill
      });
    },
    // 获取务工人员详情
    getWorkerDetail(id) {
      request(this, config.api.workerDetail + this.$route.query.id).then(
        (res) => {
          this.talent = res.data;
        }
      );
    },
    goBack() {
      this.$router.back();
      // if(this.isHelp){
      // 	return this.$router.push({ path: 'help' });
      // }
      // this.$router.push({ path: 'talentRecommendList' });
    },
  },
};
</script>

<style lang="scss" scoped>
.talent-wrap {
	display: flex;
	background: #ffffff;
	border: 1px solid #eeeeee;
	padding: 40px;
	img {
		width: 88px;
		height: 88px;
		background: #ffffff;
		border: 2px solid #eeeeee;
		object-fit: cover;
		border-radius: 50%;
		flex-shrink: 0;
		margin-right: 23px;
	}
	.content {
		display: flex;
		flex-direction: column;
		flex: 1;
		.flex-box {
			display: flex;
			margin-bottom: 20px;
      flex-flow: wrap;
			&:last-of-type {
				margin-bottom: 0;
			}
			.name {
				font-weight: bold;
				color: #333;
				font-size: 24px;
				margin-right: 13px;
			}
			.tag {
				width: 108px;
				height: 32px;
				line-height: 32px;
				color: #fff;
				font-size: 14px;
				background: #fcac12;
				border-radius: 3px;
				font-weight: bold;
			}
			.in {
				margin-right: 10px;
				font-size: 14px;
        display: flex;
        text-align: left;
        align-items: flex-start;
        min-height: 20px;
        line-height: 20px;
        span {
          color: #999;
          text-align: left;
          // width: 70px;
          flex-shrink: 0;
        }
			}
			span {
				color: #999;
        text-align: left;
        // width: 70px;
        flex-shrink: 0;
			}
			.in-tip {
				flex-shrink: 0;
				color: #999;
				font-size: 16px;
				margin-top: 12px;
			}
			.text-box {
				font-size: 16px;
				width: 100%;
				background: #f9f9f9;
				border: 1px solid #eeeeee;
				border-radius: 3px;
				text-align: left;
				color: #333;
				padding: 12px 14px;
				min-height: 100px;
        word-break:break-all
			}
		}
	}
}
.layout {
  min-height: 100vh;
  position: relative;
  padding-bottom: 170px;
  box-sizing: border-box;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
}

.helptalentDetail {
  width: 1200px;
  margin: 0 auto;
  .btn{
    margin-top: 20px;
  }
}

.backBtn {
  background-color: #f1f2f4;
  color: #045db9;
  padding: 10px 0px;
  font-size: 15px;
  border-radius: 5px;
  /* margin-right: 20px; */
  transition: all 0.2s ease 0s;
  width: 120px;
  box-sizing: border-box;
  text-align: center;
  margin: 20px auto;
}

.backBtn:hover {
  cursor: pointer;
  box-shadow: 0px 0px 5px #eeeeee;
}

.helptalentDetail .topDiv {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px 0;
}

.helptalentDetail .topDiv .msgDiv {
  font-size: 24px;
  font-weight: bold;
}

.helptalentDetail .topDiv .sendBtn {
  padding: 10px 30px;
  background-color: #045db9;
  color: #ffffff;
  font-size: 15px;
  border-radius: 3px;
  transition: all 0.2s ease 0s;
}

.helptalentDetail .topDiv .sendBtn:hover {
  cursor: pointer;
  box-shadow: 0px 0px 10px #eeeeee;
}

.helptalentDetail .title {
  font-size: 20px;
  font-weight: bold;
  text-align: left;
  color: #045db9;
  border-bottom: 2px solid #045db9;
  padding: 10px 10px 10px 0;
  margin-top: 10px;
  margin-bottom: 20px;
}

.helptalentDetail .tableDiv {
  border: 1px solid #eeeeee;
  color: #666666;
}

.helptalentDetail .tableDiv.desc {
  border: 1px solid #eeeeee;
  color: #666666;
  padding: 20px;
  font-size: 14px;
  text-align: left;
  margin-bottom: 38px;
}

.helptalentDetail .tableDiv .rowDiv {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #eeeeee;
  font-size: 13px;
}

.helptalentDetail .tableDiv .rowDiv .keyDiv {
  text-align: left;
  background-color: #f4f4f4;
  padding: 10px;
  width: 110px;
}

.helptalentDetail .tableDiv .rowDiv .valueDiv {
  text-align: left;
  padding: 10px;
  width: 349px;
}
</style>
